<%@ page contentType="text/html;charset=UTF-8" language="java" trimDirectiveWhitespaces="true" %>
<%@ taglib uri="http://www.ymate.net/ymweb_core" prefix="ymp" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<ymp:ui src="layout/base">
    <ymp:property name="title"><ymp:i18n key="page.login.title"/></ymp:property>
    <ymp:property name="page.css">
        <style type="text/css">
            body {
                background-color: #FFFFFF;
            }

            body > .grid {
                height: 100%;
            }

            .image {
                margin-top: -100px;
            }

            .column {
                max-width: 450px;
            }
        </style>
    </ymp:property>
    <ymp:layout>
        <div class="ui middle aligned center aligned grid">
            <div class="column">
                <div class="ui active inverted dimmer" style="display: none;">
                    <div class="ui text loader"></div>
                </div>
                <h2 class="ui grey image header">
                    <img src="images/logo.png" class="image">
                    <div class="content">
                        <ymp:i18n key="page.login.form_title"/>
                    </div>
                </h2>
                <form class="ui large form">

                    <input type="hidden" name="_lang" value="${param['_lang']}">
                    <input type="hidden" name="redirect_url" value="${param['redirect_url']}">

                    <c:if test="${not empty param['redirect_url']}">
                        <div class="ui warning message" style="display: block;">
                            <p><i class="warning circle icon"></i><ymp:i18n key="webmvc.session_timeout"/></p>
                        </div>
                    </c:if>

                    <div class="ui stacked segment">
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="email" placeholder="<ymp:i18n resourceName="validation" key="form_item.email"/>">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input type="password" name="password" placeholder="<ymp:i18n resourceName="validation" key="form_item.password"/>">
                            </div>
                        </div>
                        <div class="ui fluid large blue submit button"><ymp:i18n key="page.login.form_button_submit"/></div>
                    </div>

                    <div class="ui error message"></div>

                </form>

                <div class="ui message">
                    <ymp:i18n key="page.login.text_no_account"/>&nbsp;<a href="signup"><ymp:i18n key="page.login.text_to_register"/></a>
                </div>

                @{body}
                <ymp:layout src="layout/footer"/>
            </div>
        </div>
    </ymp:layout>
    <ymp:script>
        $(document).ready(function () {
            $('.ui.form').form({
                fields: {
                    email: {
                        identifier: 'email',
                        rules: [
                            {
                                type: 'empty',
                                prompt: '<ymp:i18n resourceName="validation" key="validation.email_empty"/> '
                            },
                            {
                                type: 'email',
                                prompt: '<ymp:i18n resourceName="validation" key="validation.email_not_valid"/>'
                            }
                        ]
                    },
                    password: {
                        identifier: 'password',
                        rules: [
                            {
                                type: 'empty',
                                prompt: '<ymp:i18n resourceName="validation" key="validation.password_empty"/>'
                            },
                            {
                                type: 'length[6]',
                                prompt: '<ymp:i18n resourceName="validation"  key="validation.password_length6"/>'
                            }
                        ]
                    }
                },
                on: "submit",
                onSuccess: function (e) {
                    e.preventDefault();
                    //
                    $('.ui.error.message').hide();
                    $('.ui.form').addClass('loading');
                    //
                    var _elemPassword = $('.ui.form input[name=password]');
                    var _original = _elemPassword.val();
                    if (_original && _original !== '') {
                        _elemPassword.val(md5(_original));
                    }
                    var formData = $('.ui.form input').serializeArray();
                    //
                    $.ajax({
                        type: 'POST',
                        url: 'api/login',
                        data: formData,
                        dataType: 'json',
                        success: function (data, textStatus) {
                            if (data.ret === 0) {
                                $('.ui.submit.button').addClass('disabled');
                                window.location.href = data.data.redirect_url;
                            } else {
                                var _msg = data.msg ? data.msg : '<ymp:i18n key="webmvc.error_default_i18n_key"/>';
                                $('.ui.error.message').html(_msg).show();
                            }
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            console.log(textStatus);
                            console.log(errorThrown);
                            $('.ui.error.message').html('<ul class="list"><li><ymp:i18n key="webmvc.error_default_i18n_key"/></li></ul>').show();
                        },
                        complete: function (xhr, textStatus) {
                            _elemPassword.val(_original);
                            $('.ui.form').removeClass('loading');
                        }
                    });
                }
            });
        });
    </ymp:script>
</ymp:ui>